import React, { useState } from 'react';
import { Table, Button } from 'antd';
import './index.less';

const Tables = () => {
      const [rowData, setRowData] = useState({})
      const columns = [
            {
                  title: '姓名',
                  dataIndex: 'name',
                  key: 'name',
                  align: 'center'
            },
            {
                  title: '年龄',
                  dataIndex: 'age',
                  key: 'age',
                  align: 'center'
            },
            {
                  title: '地址',
                  dataIndex: 'address',
                  key: 'address',
                  align: 'center'
            },
            {
                  title: '设置',
                  key: 'action',
                  align: 'center',
                  render: (text, record) => (
                        <div>
                              <Button>修改</Button>
                              <Button style={{ marginLeft: '10px' }}>删除</Button>
                        </div>
                  ),
            },
      ];
      const dataSource = [
            {
                  key: '1',
                  name: '胡彦斌',
                  age: 32,
                  address: '西湖区湖底公园1号',
            },
            {
                  key: '2',
                  name: '胡彦祖',
                  age: 42,
                  address: '西湖区湖底公园1号',
            },
            {
                  key: '3',
                  name: '胡彦祖',
                  age: 42,
                  address: '西湖区湖底公园1号',
            },
      ];

      const onClickRow = (record) => {
            setRowData(record)
      }

      //设置表格行选中样式
      const setRowClassName = (record) => {
            return record.key === rowData.key ? 'colorStyle' : ''
      }

      return (
            <>
                  <Table
                        rowClassName={setRowClassName} //表格行的类名
                        dataSource={dataSource}
                        columns={columns}
                        rowKey={(record) => record.key} // 需要修改为唯一的ID！
                        onRow={record => {
                              return {
                                    onClick: () => { onClickRow(record) }, // 点击行
                              }
                        }}
                  />
            </>
      )
}

export default Tables;